<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div#box{
				width: 500px;
				height: 50px;
				border: 1px solid;
				margin: 20px;
				padding: 20px;
			}
			table{
				width: 500px;
				height: 100px;
				margin: 20px;
				text-align: center;
			}
			#box>button{
				cursor: pointer;
			}
			tr>td>button{
				cursor: hand;
			}
		</style>
	</head>
	<body>
		<div id="box">
			用户名：<input type="text" id="user" value="" />
			密&emsp;码：<input type="password" id="password" value=""/>
			<button type="button" class="btn">提交</button>
		</div>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>
						<td>用户名</td>
						<td>密码</td>
						<td>操作</td>
					</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<th>
						<td>${arr[i].user}</td>
						<td>${arr[i].password}</td>
						<td><button type="button" class="del" onclick="del(${arr[i].id})">删除</button></td>
					</th>
				</tr> -->
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		var user = document.querySelector("#user");
		var password = document.querySelector("#password");
		var btn = document.querySelector(".btn");
		var tbody = document.querySelector("tbody");
		
		if (localStorage.cv) {
			var arr = JSON.parse(localStorage.cv);
			show(arr);
		} else {
			var arr = [];
			localStorage.aa = JSON.stringify(arr)
		}
		
		btn.onclick = function(){
			if (user.value&&password.value) {
				var obj={
					user:user.value,
					password:password.value,
					id:+new Date()
				}
				arr.push(obj);
				localStorage.cv = JSON.stringify(arr);
				show(arr);
			} else{
				alert("请输入用户名和密码！")
			}
			user.value=password.value=""
		}
		function show(arr){
			tbody.innerHTML="";
			for (var i=0;i<arr.length;i++) {
				tbody.innerHTML+=`
				    <tr>
				        <th>
				        	<td>${arr[i].user}</td>
				        	<td>${arr[i].password}</td>
				        	<td><button type="button" class="del" onclick="del(${arr[i].id})">删除</button></td>
				        </th>	
				    </tr>
				`;
			}
		}
		function del(id){
			for(var i=0;i<arr.length;i++){
				if (arr[i].id == id) {
					arr.splice(i,1);
					break;
				}
			}
			localStorage.cv = JSON.stringify(arr);
			show(arr);
		}
	</script>
</html>
